<template>
  <div class="container" v-show="show">
    <div class="bg">
        <div class="cont-wrap">
            <div class="cont-top">
                <span>新建方案</span>
                <span @click="cancelHandler(formRef)">x</span>
            </div>
            <div class="cont-body">
                <el-form label-position="right" :label-width="80" ref="formRef" :model="form" :rules="rules">
                    <el-form-item label="方案名称" prop="code">
                        <el-input placeholder="请输入方案名称" v-model="form.code" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="显示名称" prop="value">
                        <el-input placeholder="请输入显示名称" v-model="form.value" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="所属服务" prop="serviceName">
                        <el-select v-model="form.serviceName" placeholder="请选择一个服务" :with="`100%`">
                            <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="description">
                        <el-input type="textarea" placeholder="请输入备注" v-model="form.description" autocomplete="off" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="footer">
                <el-button class="btn" @click="cancelHandler(formRef)">取消</el-button>
                <el-button class="btn" type="primary" @click="submitHandler(formRef)">创建</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getWorkSysApi } from "../../api/uiModel"
import { savaSysDataCodeApi } from "../../api/toolBar"
import { ElMessage } from "element-plus"
import { reactive, ref, toRefs, watch } from "vue"
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({ //获取父组建传过来的值
    show: {
        type: Boolean,
        default: false,
        require: true
    }
})
const emit = defineEmits(['cancelEventEmit', 'submitEventEmit']) // 注册emit事件
let list = ref([{ // 所属服务
    label: '',
    value: ''
}])
const formRef = ref<FormInstance>()
const form = reactive({
    code: '',
    value: '',
    serviceName: '',
    description:''
})
const rules = reactive<FormRules>({
    code: [{required: true, message: '请输入方案名称', trigger: 'blur'}],
    value: [{required: true, message: '请输入显示名称', trigger: 'blur'}]
    // serviceName: [{required: true, message: '请选择服务', trigger: 'change'}]
})

// 取消按钮事件
const cancelHandler = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    const flag = !props.show
    emit('cancelEventEmit', flag)
}
// 创建按钮事件
const submitHandler = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if(valid) {
            const data = {
                ...form,
                type: 'solution'
            }
            const res = await savaSysDataCodeApi({json: data})
            // TODO...   方案创建成功数据怎么保存，保存在哪？ 先保存在本地
            const storage = localStorage.getItem('SOLUTION_ARR');
            let storageArr:Array<any> = []
            if (storage) {
                storageArr = JSON.parse(storage)
            }
            storageArr.unshift(data)
            localStorage.setItem('SOLUTION_ARR', JSON.stringify(storageArr))
            emit('submitEventEmit', data)
            formEl.resetFields()
        } else {
            console.log('error submit!', fields)
        }
    })
}


const getSysData = async () => {
    const result = await getWorkSysApi()
    const data = result.data
    list.value = data
    console.log(list.value)
}

getSysData()

</script>
<style lang='scss' scoped>
.container {
    .bg {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        background: rgba(0,0,0,.7);
        .cont-wrap {
            width: 25%;
            // height: 300px;
            background: #2B2B2B;
            border-radius: 5px;
            .cont-top {
                padding: 5px 20px;
                display: flex;
                justify-content: space-between;
                color: #ADADAD;
                background: #3C3C3C;
                border-bottom: 1px solid #CDCDCD;
                span {
                    &:last-child {
                        cursor: pointer;
                    }
                }
            }
            .cont-body {
                padding: 20px 20px 0;
            }

            .footer {
                padding: 20px 20px 20px 0;
                display: flex;
                flex-direction: row-reverse;
                .btn {
                    margin-right: 10px;
                }
            }
        }
    }
    
}
</style>